<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">

    <title>大咖详情</title>
    <style>
        body {
            background-color: white;
        }

        .bigshot-detail-top {
            height: 4.36rem;
            width: 7.5rem;
            background-color: white;
        }

        .bigshot-detail-img {
            min-height: 4.36rem;
        }

        .bigshot-detail-img img {
            width: 100%;
            height: 2.64rem;
        }

        .bigshot-detail-info {
            width: 100%;
            top: 1.5rem;
            left: 0;
            padding: 0 0.32rem 0.28rem 0.32rem;
        }

        .bigshot-detail-top-img {
            height: 1.32rem;
            width: 1.32rem;
        }

        .bigshot-detail-top-img img {
            width: 100%;
            height: 100%;
            border-radius: 50rem;
        }

        .bigshot-detail-top-desc {
            color: rgba(34, 34, 34, 0.45);
            margin-top: 0.14rem;
        }

        .bigshot-detail-top-count {
            margin-top: 0.28rem;
        }

        .bigshot-detail-top-count-color {
            color: rgba(34, 34, 34, 0.45);
        }


        .bigshot-detail-item {
            padding: 0.36rem 0;
            border-bottom: 1px solid #f6f6f6;
        }

        .bigshot-detail-item-left {
            width: 2.8rem;
            height: 1.6rem;
            position: relative;
        }

        .bigshot-detail-item-left-img {
            width: 2.8rem;
            height: 1.6rem;
        }

        .bigshot-detail-item-left-img img {
            width: 100%;
            height: 100%;
            border-radius: 0.04rem;
        }

        .bigshot-detail-item-time {
            position: absolute;
            top: 1.15rem;
            right: 0.1rem;
        }

        .bigshot-detail-item-time div {
            background-color: rgba(0, 0, 0, 0.25);
            color: rgba(255, 255, 255, 0.8);
            padding: 0.02rem 0.08rem;
        }

        .bigshot-detail-item-title {
            color: #222222;
        }

        .bigshot-detail-item-bottom {
            color: rgba(34, 34, 34, 0.45);
        }

        .bigshot-detail-line {
            height: 0.16rem;
            width: 100%;
            background-color: #F4F4F4;
        }

        .bigshot-detail-more {
            color: #FF9523
        }

        .bigshot-detail-all {
            background-color: white
        }

        .bigshot-detail-pd {
            padding: 0 0.32rem;
        }

        .bigshot-detail-avideo {
            color: #222222;
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">
    <div class="placeholder-top pos-f">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">大咖</div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="mescroll" id="mescroll">
        <div class="bigshot-detail-top pos-r">
            <div class="bigshot-detail-img"><img src="../../images/big-shot.png"></div>
            <div class="flex-column bigshot-detail-info pos-a">
                <div class="flex-row">
                    <div class="bigshot-detail-top-img mr15">
                        <img src=""/>
                    </div>
                    <div class="flex-column flex-1">
                        <div class="bigshot-detail-top-name fs18 ff500"></div>
                        <div class="bigshot-detail-top-desc fs13"></div>
                        <div class="bigshot-detail-top-count flex-row">
                            <div class="flex-column align-items-center">
                                <!--视频数-->
                                <div class="bigshot-detail-top-count-video fs16"></div>
                                <div class="bigshot-detail-top-count-color fs12">视频</div>
                            </div>
                            <div class="flex-column align-items-center ml50">
                                <!--视频播放量-->
                                <div class="bigshot-detail-top-count-read fs16"></div>
                                <div class="bigshot-detail-top-count-color fs12">播放量</div>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>

        <div class="bigshot-detail-line"></div>

        <div class="bigshot-detail-all flex-column pt20 pb20">
            <div class="bigshot-detail-pd flex-column">
                <div class="bigshot-detail-avideo  fs18 ff500">全部视频</div>
                <!--大咖的视频列表-->
                <div class="bigshot-detail-list">
                </div>
            </div>
        </div>
    </div>
    <!--<div class="more">加载中...</div>-->
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>


<script>
  let pm = {
    isScroll: false,
    pageNum: 1,
    pageSize: 10,
    funcCode: '',
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.funcCode = params.characterId
    pageScroll()
    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: reLoadPage, //下拉刷新入口
      upCallback: getTrainListByFuncCode //滚动加载入口
    })
  }

  function startPage() {
    let dom = $('.bigshot-detail-top-count-read')
    let cnt = dom.html()
    dom.html(parseInt(cnt) + 1)// 播放量
  }

  function reLoadPage() {
    pm.isScroll = false//初始化滚动状态
    pm.pageNum = 1
    getCharacterById()//查询大咖详情
    getTrainListByFuncCode()//查询大咖的视频列表
  }

  //根据id查询大咖信息
  function getCharacterById() {
    Server.bigshotDetail.getCharacterById({
      characterId: pm.funcCode
    }).then(function (data) {
      if (data.body) {
        $('.bigshot-detail-top-img img').attr('src', data.body.headUrl)// 头像
        $('.bigshot-detail-top-name').html(data.body.name)// 大咖名
        if (data.body.introduction.length > 50) {
          $('.bigshot-detail-top-desc').html(data.body.introduction.substring(0, 50) + '...')// 大咖介绍
          $('.bigshot-detail-top-desc').append('<span class="bigshot-detail-more fs12 ml4">查看更多</span>')
          $('.bigshot-detail-more').click(function () {
            Template.bottomPop(data.body.name, data.body.introduction)
          })
        } else {
          $('.bigshot-detail-top-desc').html(data.body.introduction)
        }

        $('.bigshot-detail-top-count-video').html(data.body.articleCnt)// 大咖下的视频数
        $('.bigshot-detail-top-count-read').html(data.body.visitCnt)// 播放量
      }
    })
  }

  //查询大咖的视频列表
  function getTrainListByFuncCode() {
    Server.bigshotDetail.getTrainListByFuncCode({
      funcCode: pm.funcCode,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {
      let htmlStr = ''
      let len = 0
      data.trainList.forEach(function (item) {
        len = data.trainList.length
        let jsonStr = JSON.stringify({
          infoId: item.trainingId,
          infoType: '2',
          resourceType: '2'
        })
        htmlStr += '<div class=\'bigshot-detail-item flex-row\' onclick=\'goDetail(' + jsonStr + ')\'>'
        htmlStr += '<div class=\'flex-row mr15 bigshot-detail-item-left\'>'
        htmlStr += '<div class=\'bigshot-detail-item-left-img\'>'
        htmlStr += '<img src=' + item.coverImgUrl + ' />'
        htmlStr += '</div>'
        htmlStr += '<div class=\'bigshot-detail-item-time flex-row\'>'
        htmlStr += '<div class=\'fs12\'>' + DateUtils.s2Str(item.videoDuration) + '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        htmlStr += '<div class=\'bigshot-detail-item-content flex-column justify-content-between flex-1\'>'
        htmlStr += '<div class=\'bigshot-detail-item-title fs15 ff500 line2\'>' + item.mainTitle + '</div>'
        htmlStr += '<div class=\'bigshot-detail-item-bottom flex-row justify-content-between align-items-center\'>'
        htmlStr += '<div class=\'fs13\'>' + item.issuerDttmStr.substring(0, 10) + '</div>'
        htmlStr += '<div class=\'flex-row align-items-center\'>'
        htmlStr += '<span class=\'iconfont iconbofangliang-01 mr5\'></span>'
        htmlStr += '<span class="readCnt_' + item.trainingId + '">' + item.readCnt + '</span>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
      })

      if (pm.pageNum === 1) {
        $('.bigshot-detail-list').html(htmlStr)
      } else {
        $('.bigshot-detail-list').append(htmlStr)
      }

      pm.pageNum++
      meScroll.endSuccess(len, len === pm.pageSize)
    }).catch((error) => {
      meScroll.endErr()
    })
  }


  /**
   * @param callback 翻页回调函数
   */
  function pageScroll(callback) {
    //需要特殊处理的滚动区域，需要放在scroller元素区域内
    $('.mescroll').scroll(function () {
      let scrollTop = $(this).scrollTop()

      dealHead(scrollTop)

    })
  }


  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.left-bar').css({
        'color': 'rgb(255,255,255)'
      })
    } else {
      currStop = 64
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
    })
  }


</script>
</html>
